<template>
  <view style="display: flex; flex-direction: column; position: relative;">
    <image
      src="../../static/me-bg.png"
      mode="widthFix"
      style="width: 100vw; height: 71vw; position: absolute; left: 0; top: -88rpx; z-index: -1;"
    />
    <view class="row" style="align-items: center; margin-left: 30rpx; margin-top: 64rpx;">
      <template v-if="isLogin">
        <image
          :src="headUrl"
          mode="aspectFill"
          style="width: 100rpx;height: 100rpx;border-radius: 50rpx;"
          @click="goSetting"
        />
        <view style="margin-left: 24rpx;" @click="goSetting">
          <up-text type="" size="38" color="#fff" :text="nickName" margin="0 0 16rpx"></up-text>
          <up-text type="" size="28" color="#fff" :text="position"></up-text>
        </view>
      </template>
      <template v-else>
        <image
          :src="headUrl"
          mode="aspectFill"
          style="width: 100rpx;height: 100rpx;border-radius: 50rpx;"
        />
        <view style="margin-left: 24rpx;">
          <up-text type="" size="38" color="#fff" text="欢迎来到七巷里官方商城" margin="0 0 16rpx"></up-text>
          <u-button
            v-if="inviteUserId"
            :plain="true"
            :hairline="true"
            shape="circle"
            size="small"
            :openType="'getPhoneNumber'"
            @getphonenumber="getphonenumber"
            :customStyle="{margin: 0, width: '80px', color: '#fff', backgroundColor: 'rgba(255,255,255,.3)'}"
          >
            登录注册
          </u-button>
          <u-button
            v-else
            :plain="true"
            :hairline="true"
            shape="circle"
            size="small"
            @click="noInviteUserIdLogin"
            :customStyle="{margin: 0, width: '80px', color: '#fff', backgroundColor: 'rgba(255,255,255,.3)'}"
          >
            登录注册
          </u-button>
        </view>
      </template>
    </view>
    <up-text v-if="isPoint" type="" size="38" color="#fff" :text="`商品积分：${point}`" margin="48rpx 30rpx 0"></up-text>
    <up-text v-if="isPoint" type="" size="38" color="#fff" :text="`其他积分：${realPoint}`" margin="48rpx 30rpx 0"></up-text>
    <view v-if="isLogin" :style="isPoint ? 'margin-top: calc(42vw - 180rpx)' : 'margin-top: 42vw'">
      <u-cell-group>
        <u-cell title="我的地址" :isLink="true" @click="goAddress"></u-cell>
        <u-cell title="购物车" :isLink="true" @click="goShopCat"></u-cell>
        <u-cell title="我的订单" :isLink="true" @click="goOrder"></u-cell>
        <u-cell title="我的业绩" :isLink="true" @click="goMyPerformance"></u-cell>
        <button
          open-type="share"
          throttleTime="300"
          class="shareBtn"
        >
          <u-cell title="贵宾顾客邀请" :isLink="true" ></u-cell>
        </button>
        <!-- <u-cell title="在线加入" :isLink="true"></u-cell> -->
      </u-cell-group>
    </view>
    <common-shopCard-modal :isLogin="isLogin"></common-shopCard-modal>
  </view>
  <u-toast ref="uToast"></u-toast>
  <custom-tab-bar />
</template>

<script>

import { setTabBarSelected, defaultAvatarUrl, positionEnum, setTabBarList, getUserInfo } from '@/utils/common'
import { register } from '@/services/user'
import { store } from '@/store';

export default {
  data() {
    return {
    }
  },
  computed: {
    isPoint() {
      const { isPoint } = this.$store.state;
      return isPoint;
    },
    isLogin() {
      const isLogin = this.$store.state.isLogin;
      setTabBarList(isLogin);
      const num = isLogin ? 3 : 2;
      setTabBarSelected(num);
      return isLogin;
    },
    inviteUserId() {
      return this.$store.state.inviteUserId;
    },
    headUrl() {
      const { headUrl } = this.$store.state.userInfo;
      // return headImage || "https://bmp-app-static.herbalifeonline.cn/miniprogram/images/me/default-avatar.png"
      return headUrl || defaultAvatarUrl;
    },
    nickName() {
      const { nickName } = this.$store.state.userInfo;
      return nickName;
    },
    position() {
      const { position } = this.$store.state.userInfo;
      return positionEnum[position];
    },
    point() {
      const { point } = this.$store.state.userInfo;
      return point || 0;
    },
    realPoint() {
      const { realPoint } = this.$store.state.userInfo;
      return realPoint || 0;
    },
  },
  async onShow() {
    setTabBarSelected(this.isLogin ? 3 : 2);
    getUserInfo(store);
  },
  methods: {
    goAddress() {
       uni.navigateTo({
        url: '/pages/address/index'
      })
    },
    noInviteUserIdLogin() {
      console.log('this.$store.state.inviteUserId', this.$store.state.inviteUserId)
      this.$refs.uToast.show({
        message: "只有被邀请人才能注册",
      })
    },
    getphonenumber(e) {
      console.log(e.detail.code)  // 动态令牌
      console.log(e.detail.errMsg) // 回调信息（成功失败都会返回）
      console.log(e.detail.errno)  // 错误码（失败时返回）
      if (this.inviteUserId) {
        if (!e.detail.code) {
          this.$refs.uToast.show({
            message: "获取手机号失败",
          })
        } else {
          register({
            phoneCode: e.detail.code,
            inviteUserId: this.inviteUserId
          }).then((res) => {
            if (res.success) {
              uni.navigateTo({
                url: '/pages/register/index'
              })
            }
          }).catch(() => {
            this.$refs.uToast.show({
              message: "注册失败，请重试",
            })
          })
        }
      }
    },
    goShopCat() {
      uni.navigateTo({
        url: '/pages/shopCart/index'
      })
    },
    goOrder() {
      uni.navigateTo({
        url: '/pages/order/index'
      })
    },
    goMyPerformance() {
      uni.navigateTo({
        url: '/pages/performance/index'
      })
    },
    goSetting() {
      uni.navigateTo({
        url: '/pages/setting/index'
      })
    }
  },
  onShareAppMessage(res) {
    const userId = uni.getStorageSync('userId');
    const shareObj = {
      title: '贵宾顾客邀请',
      path: `/pages/index/index?inviteUserId=${userId}`,
      imageUrl: 'https://0563headurl.oss-cn-hangzhou.aliyuncs.com/WechatIMG144.jpg',
    }
    const promise = new Promise(resolve => {
      setTimeout(() => {
        uni.$u.toast('分享成功')
      }, 1000)
      resolve(shareObj)
    })
    return {
      ...shareObj,
      promise,
    }
  }
}
</script>

<style lang="scss" scoped>
.bottomCell {
  margin-top: 42vw;
}
.shareBtn {
  background-color: #fff;
  padding: 0;
  text-align: left;
  border-radius: 0 !important;
  border: none !important;
}
.shareBtn:after{
  border:none;
}
</style>
